<!--能源 预警组件模板-->
<template>
    <el-scrollbar max-height="380px" height="380px">
        <div v-for="(r, idx) in listData" :key="idx" class="warnTemplate">
            <div class="head">能耗</div>
            <div class="content">
                <div class="flex_content">
                    <div class="li_box">
                        <div v-for="(item, index) in r.list" :key="index">
                            <div class="borders" :style="{ background: index ? '#0e96ff ' : 'red' }"></div>
                            <span>{{ item.name }}：</span>
                            <span :style="{ color: index ? '#FFF' : 'red' }">
                                {{ item.value }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="tip">
                    <p>{{ r.tip }}</p>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
    listData: {
        list: Array<any>;
        tip: string;
    }[];
}
const props = withDefaults(defineProps<Props>(), {
    /** 预警数据，必须是二维数组
     *  -list 渲染数据
     *  -tip 标识
     */
    listData: () => [
        {
            list: [
                { name: '用水量', value: '200m³' },
                { name: '事件类型', value: '超高报' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未处理'
        },
        {
            list: [
                { name: '用水量', value: '200m³' },
                { name: '事件类型', value: '超高报' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未处理'
        },
        {
            list: [
                { name: '用水量', value: '200m³' },
                { name: '事件类型', value: '超高报' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未处理'
        },
        {
            list: [
                { name: '用水量', value: '200m³' },
                { name: '事件类型', value: '超高报' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未处理'
        },
        {
            list: [
                { name: '用水量', value: '200m³' },
                { name: '事件类型', value: '超高报' },
                { name: '触发时间', value: '2022-06-10 10:00:00' }
            ],
            tip: '未处理'
        }
    ]
});
</script>

<style lang="scss" scoped>
.warnTemplate {
    box-sizing: border-box;
    margin-bottom: 20px;
    .head {
        background: rgba(19, 79, 124, 0.8);
        width: 100%;
        padding: 12px 0;
        text-align: center;
        letter-spacing: 2px;
        font-size: 18px;
        color: #ffffff;
    }
    &:last-of-type {
        margin-bottom: 0;
    }

    .content {
        padding: 24px 15px;
        background: rgba(27, 54, 77, 0.8);
        position: relative;
        overflow: hidden;
        .flex_content {
            display: flex;
            align-items: center;
            flex: 1;
        }
        .li_box {
            width: 70%;
            > div {
                display: flex;
                align-items: center;
                margin-bottom: 18px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .borders {
                width: 3px;
                height: 11px;
                background: #0e96ff;
                border-radius: 2px;
                margin-right: 12px;
            }
            &:last-of-type {
                margin-bottom: 0;
            }
            span {
                font-size: 14px;
                &:first-of-type {
                    @include fontCustomStyle(#b6b5b5, 14px);
                }
            }
        }

        .tip {
            color: #294258;
            background: #fbce05;
            position: absolute;
            right: -22px;
            top: 8px;
            font-size: 12px;
            transform: rotateZ(45deg);
            width: 80px;
            text-align: center;
            padding: 1px 0;
        }
    }
}
</style>
